﻿@{
    ViewBag.Title = "Справочник товаров";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<header class="jumbotron subhead" id="overview">
    <h1>Справочник товаров</h1>
    <p class="lead">Просмотр, создание и редактирование информации по товарам.</p>
</header>

<div class="input-append">
    <input type="text" class="input-xxlarge" name="FILTER" value="$top=100" />
    <button class="btn" type="button" data-action="filter"><i class="icon-filter"></i> Фильтр</button>
</div>

<table data-name="WH_ITEMS" class="table table-striped">
    <thead>
        <tr>
            <th data-name="EXT_KEY">
                Код товара
            </th>
            <th data-name="ITEM_NAME">
                Наименование товара
            </th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

<p>
    <a href="#" class="btn" data-action="create" data-name="WH_ITEMS"><i class="icon-plus"></i> Создать новый товар</a>
</p>

<div class="modal hide" data-name="WH_ITEMS">

    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h3>Редактирование документа</h3>
    </div>

    <div class="modal-body">

        <form name="WH_ITEMS" class="form-horizontal" method="post"> 
            <fieldset> 

                <input type="hidden" name="GUID_RECORD" value="" />
                <input type="hidden" name="COMPANY_GUID" value="" />

                <div class="control-group"> 
                    <label class="control-label" for="EXT_KEY">Код товара</label>
                    <div class="controls">
                        <input type="text" class="input-xlarge" name="EXT_KEY" value="">
                    </div> 
                </div> 

                <div class="control-group"> 
                    <label class="control-label" for="ITEM_NAME">Наименование товара</label>
                    <div class="controls">
                        <input type="text" class="input-xlarge" name="ITEM_NAME" value="">
                    </div> 
                </div> 

            </fieldset>
        </form>

        <table data-name="ITEMS_MAPPING" class="table table-striped">
            <thead>
                <tr>
                    <th data-name="ITEM.COMPANY.COMPANY_NAME">
                        Компания
                    </th>
                    <th data-name="ITEM.ITEM_NAME">
                        Наименование товара
                    </th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>

    </div>

    <div class="modal-footer">
        
        <div style="float: left">
            <a href="#" class="btn" data-action="create" data-name="ITEMS_MAPPING"><i class="icon-plus"></i> Добавить позицию</a>
        </div>

        <a href="#" class="btn" data-dismiss="modal">Закрыть</a>
        <a href="#" class="btn btn-primary" data-action="save">Сохранить</a>
    </div>
</div>


<div class="modal hide" data-name="ITEMS_MAPPING">

    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h3>Редактирование соответствия</h3>
    </div>

    <div class="modal-body">

        <form name="ITEMS_MAPPING" class="form-horizontal" method="post"> 
            <fieldset> 

                <input type="hidden" name="ORIGINAL_ITEM_GUID" value="">

                <div class="control-group"> 
                    <label class="control-label" for="COMPANY_GUID">Компания</label>
                    <div class="controls">
                        <select 
                            data-autoload="true"
                            data-name="SEC_COMPANIES_ACCESS" 
                            data-value="ALLOW_COMPANY.GUID_RECORD" 
                            data-text="ALLOW_COMPANY.COMPANY_NAME" name="COMPANY_GUID"></select>
                    </div> 
                </div> 

                <div class="control-group">
                    <div class="controls">
                        <div class="input-append">
                            <input type="text" class="input-medium" name="ITEM-FILTER" value="" />
                            <button class="btn" type="button" data-action="item-filter"><i class="icon-filter"></i></button>
                        </div>
                    </div>
                </div>

                <div class="control-group"> 
                    <label class="control-label" for="ITEM_GUID">Наименование товара</label>
                    <div class="controls">
                        <select 
                            data-name="AllowItems" 
                            data-value="GUID_RECORD" 
                            data-text="ITEM_NAME" name="ITEM_GUID"></select>
                    </div> 
                </div> 

            </fieldset>
        </form>

    </div>

    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Закрыть</a>
        <a href="#" class="btn btn-primary" data-action="ITEMS_MAPPING-save">Сохранить</a>
    </div>
</div>


<script type="text/javascript">

    $(function () {

        var office = new Office();

        $('.modal').on("show", function () {
            $(this).find("input").val("");
            $(this).find("select").val("");
            $(this).find("textarea").val("");
            $(this).find("tbody").empty();
        });

        $("select[data-autoload='true']").each(function () {

            var element = $(this);
            var name = $(this).attr("data-name");
            var data_value = $(this).attr("data-value");
            var data_text = $(this).attr("data-text");

            element.empty();

            $.get("/edex/api/" + name + "/", function (data) {

                office.Store[element.attr("name")] = data;

                $.each(data, function (index, itemData) {

                    var option = $("<option>");

                    option.val(getValueByPath(itemData, data_value));
                    option.text(getValueByPath(itemData, data_text));

                    element.append(option);
                });
            });
        });

        $("table[data-name='WH_ITEMS'] tr td").live("click", function () {

            var id = $(this).parent().attr("data-id");

            $(office.Store["WH_ITEMS"]).filter(function (i, r) {
                if (r["GUID_RECORD"] == id)
                    return true;
            }).each(function (i, r) {

                $('.modal[data-name="WH_ITEMS"]').modal("show");

                office.Form.load({
                    renderTo: $('.modal[data-name="WH_ITEMS"]'),
                    data: r
                });

                /// Заполняем позиции
                $.get("/edex/api/ITEMS_MAPPING/?COMPANY_GUID=" + r["COMPANY_GUID"] + "&ITEM_GUID=" + r["GUID_RECORD"], function (data) {

                    office.Store["ITEMS_MAPPING"] = data;

                    office.Grid({
                        tableName: "ITEMS_MAPPING",
                        data: data
                    });
                });

            });
        });

        $(".btn[data-action='create']").on("click", function () {

            var name = $(this).attr("data-name");
            var modal = $(".modal[data-name='" + name + "']");

            modal.modal("show");
        });

        $(".modal .btn[data-action='delete']").on("click", function () {

            var modal = $(this).parents(".modal");
            var name = modal.attr("data-name");
            var form = modal.find("form");
            var data = form.serializeObject();

            $.ajax({
                type: 'DELETE',
                url: "/edex/api/" + name + "/" + data["GUID_RECORD"]
            }).done(function () {
                modal.modal("hide");
            });
        });


        $(".modal .btn[data-action='save']").on("click", function () {

            var modal = $(this).parents(".modal");
            var name = modal.attr("data-name");
            var form = modal.find("form");
            var data = form.serializeObject();

            var uri = "/edex/api/" + name + "/";
            var type = "POST";

            if (data["GUID_RECORD"] != "") {
                type = 'PUT';
                uri = uri + data["GUID_RECORD"];
            }

            $.ajax({
                type: type,
                url: uri,
                data: data
            }).done(function () {
                modal.modal("hide");
            });
        });


        $(".modal .btn[data-action='ITEMS_MAPPING-save']").on("click", function () {

            var modal = $(this).parents(".modal");

            var uri = "/edex/api/ITEMS_MAPPING/?"
                + "ITEM_GUID=" + $("input[name='GUID_RECORD']").val()
                +  "&SUPPLIER_ITEM_GUID=" + $("select[name='ITEM_GUID']").val();
            var type = "POST";

            $.ajax({
                type: type,
                url: uri
            }).done(function () {
                modal.modal("hide");
            });
        });


        $(".btn[data-action='filter']").on("click", function () {

            var filter = $("input[name='FILTER']").val();
            var uri = "/edex/api/WH_ITEMS/";

            if (filter != "")
                uri += "?" + filter;

            $.get(uri, function (data) {

                office.Store["WH_ITEMS"] = data;

                office.Grid({
                    tableName: "WH_ITEMS",
                    data: data
                });
            });

        });


        $("table[data-name='ITEMS_MAPPING'] tr td").live("click", function () {

            var id = $(this).parent().attr("data-id");

            $(office.Store["ITEMS_MAPPING"]).filter(function (i, r) {
                if (r["GUID_RECORD"] == id)
                    return true;
            }).each(function (i, r) {

                $('.modal[data-name="ITEMS_MAPPING"]').modal("show");

                office.Form.load({
                    renderTo: $('.modal[data-name="ITEMS_MAPPING"]'),
                    data: r
                });
            });

        });

        $("select[name='COMPANY_GUID']").on("change", function () {
            $("select[name='ITEM_GUID']").empty();
        });

        $(".btn[data-action='item-filter']").on("click", function () {

            var filter = $("input[name='ITEM-FILTER']").val();
            var uri = "/edex/api/AllowItems/";


            if (filter != "")
                uri += "?$filter=COMPANY_GUID eq guid'" + $("select[name='COMPANY_GUID']").val() + "'&$filter=substringof('" + filter + "', ITEM_NAME) eq true&$top=100&$orderby=ITEM_NAME";

            $.get(uri, function (data) {

                var element = $("select[name='ITEM_GUID']");
                var name = element.attr("data-name");
                var data_value = element.attr("data-value");
                var data_text = element.attr("data-text");

                element.empty();

                $.each(data, function (index, itemData) {

                    var option = $("<option>");

                    option.val(getValueByPath(itemData, data_value));
                    option.text(getValueByPath(itemData, data_text));

                    element.append(option);
                });

            });

        });

        
    })

</script>